<template>
    <div class="my-custiom">
      <div class="my-custiom-content">
        <div class="my-custiom-title">
          个人统计
        </div>
        <div class="my-custiom-content-text">
          <div>借阅次数：2次</div>
          <div>搜索次数：10次</div>
          <div>查看次数：59次</div>
          <div>下载次数：150次</div>         
        </div>
      </div>
  
    </div>
  </template>
  
  <script lang="ts">
  // 定义组件
  import { Component, Vue, Prop } from 'vue-property-decorator';
  import Api from '../../api/api';
  @Component
  export default class TestPage extends Vue {
    @Prop({ type: String, default: '' })
    userId!: string;
  
    @Prop({ type: Array || null, default: null })
    roleIds!: any[] | null;
  
    @Prop({ type: Array || null, default: null })
    roleName!: any[] | null;
  
    @Prop({ type: String, default: '' })
    phone!: string;
  
    @Prop({ type: String, default: '' })
    email!: string;
  
    @Prop({ type: String, default: '' })
    deptName!: string;
  
    @Prop({ type: String, default: '' })
    deptId!: string;
  
    reception: any = [
      {
        value: 0,
        name: '未回复'
      },
      {
        value: 1,
        name: '已回复'
      },
      {
        value: 2,
        name: '已关闭'
      }
      
    ]  //接收情况统计
    replayToken: any = ''
  
    created() {
      this.fetchReplayToken();
    }
  
    async fetchReplayToken() {
      this.replayToken = await Api.exportReplayToken()
      // console.log('this.replayToken', this.replayToken);
  
    }
  
  
  }
  
  </script>
  
  <style lang="less" scoped>
  .my-custiom {
      height: 100%;
      width: 100%;
  
  
  }
  
  .my-custiom-content {
      padding: 20px;
      height: 100%;
      position: relative;
      background-color: #fff;
  }
  .my-custiom-title{
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 16px;
    color: black;
    position: relative; /* 确保伪元素相对于该容器定位 */
  
  }

.my-custiom-content-text {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  justify-content: space-between; /* 平分间距 */
}

.my-custiom-content-text > div {
  flex: 1; /* 每个子项占一行的均等比例 */
  margin-bottom: 10px; /* 设置上下间距 */
  margin-left: 10px;
  text-align: center; /* 文本居中 */
  min-width: 45%; /* 确保每个子项至少占据一半宽度 */
}

/* 可选：为每个子项添加背景色或边框以增强视觉效果 */
.my-custiom-content-text > div {
  background-color: #eef7ff;
  border: 1px solid #d1e9ff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}
  </style>
  